@charset "utf-8";
@import "common";
.indexweb {
    background: #bf0c21 url(../images/xx_03.png) 100%/100% repeat-y;
    @include midContent;
    bottom: 0;
    background-size: 200%;
    .indexbox {
        width: 100%;
        height: r(660);
        overflow: hidden;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        .indexhead {
            transform: rotateX(-90deg);
            text-align: center;
            img {
                width: r(206);
            }
        }
        .indexmiddle-text {
            width: 100%;
            opacity: 0;
            transform: scale(5);
            overflow: hidden;
            img {
                display: block;
                width: r(380);
                height: r(92);
                transform: translateY();
                margin: r(40) auto;
            }
        } 
        .indexbottom,
        .indexbottom1 { 
            background: url(../images/box_15.png) 100%/100% no-repeat;
            width: r(320);
            height: r(46);
            margin: r(30) auto;
            position: relative;
            overflow: hidden;
            p {
                height: r(46);
                line-height: r(46);
                font-size: r(22);
                color: #e7c598;
                margin: 0 auto;
                text-align: center;
            }
        }
        .indexbottom{
            transform: translateX(-300%);
        }
        .indexbottom1{
            transform: translateX(300%);
        }
    }
}

.bomb {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    z-index: -1;
    transition: all .3s;
    .dj {
        width: r(418);
        height: r(225);
        background: #e7c598;
        border-radius: r(20);
        margin: r(350) auto;
        position: relative;
        padding-top: r(40);
        transition: transform .3s;
        .imgs {
            width: r(36);
            height: r(36);
            position: absolute;
            top: r(12);
            right: r(14);
            img {
                width: r(36);
                height: r(36);
            }
        }
        p {
            width: r(240);
            font-size: r(24);
            color: #BF0C21;
            margin: 0 auto;
            text-align: center;
        }
        .btu {
            width: r(196);
            height: r(38);
            background: #BF0C21;
            margin: 0 auto;
            margin-top: r(40);
            border-radius: r(8);
            position: relative;
            button {
                width: r(196);
                height: r(38);
                color: #E7C598;
                font-size: r(18);
                line-height: r(40);
                background: transparent;
                border: none;
                vertical-align: top;
                text-align: center;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
            }
        }
    }
}

 
.AR-web {
    width: 100%;
    height: 100%;
    background: #bf0c21 url(../images/xx_03.png) 100%/100% repeat-y;
    background-size: 200%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
    transform: translateY(-100%);
    .AR-box {
        @include midContent;
        bottom: r(104);
        .AR-text {
            background: url(../images/AR_03.png) 100%/100% no-repeat;
            width: r(542);
            height: r(842);
            margin: r(40) auto;
        }
        .AR-bottom {
            background: url(../images/box_15.png) 100%/100% no-repeat;
            width: r(320);
            height: r(46);
            margin: r(35) auto;
            p {
                font-size: r(22);
                color: #e7c598;
                margin: 0 auto;
                text-align: center;
                padding-top: r(5);
            }
        }
        .AR-cabin{
            text-align: right;
            padding-right: r(48);
        }
    }
}